<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        .box{
            width: 1200px;
            height: 300px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            border: solid 2px #000;
        }
        .img-bei{
            width: 2400px;
            height: 300px;
            position: absolute;
            animation: open 5s linear infinite;
        }
        .img-bei>img{
            width: 1200px;
            float: left;
            margin-top: 250px;
        }
        @keyframes open{
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-1200px);
            }
        }
        .qiu{
            width: 40px;
            height: 60px;
            line-height: 60px;
            position: absolute;
            z-index: 100;
            text-align: center;
            font-size: 25px;
            color: aliceblue;
            top: 200px;
            left: 200px;
            transition: 0.5s;
            display: flex;
        }
        .ul{
            height: 60px;
            display: flex;
            justify-content: space-between;
            margin-top: 200px;
            margin-left: 704px;
        }
        .zhangai{
            list-style: none;
            width: 60px;
            height: 60px;
            line-height: 60px;
            z-index: 100;
            text-align: center;
            font-size: 25px;
            color: aliceblue;
            font-weight: bold;
            float: left;
            align-items: center;
        }
        .zhangai>img{
            width: 100%;
        }
    </style>
</head>
<body>
    <div style="font-size: 18px;color: rgb(159, 0, 0);">积分: <span id="jifen"></span></div>
    <div class="box">
        <div id="bijitu" class="img-bei">
            <img src="./img/1.jpg" alt="">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="qiu" id="Qu">
            <img id="zhendonghua" src="./img/oi.jpg" alt="">
        </div>
        <ul class="ul" id="uto" style="margin-left: 172px;">
            <li class="zhangai">
                <img src="./img/1.jpg" alt="">
            </li>
        </ul>
    </div>
    <h1 style="text-align: center;">w跳</h1>
    <h1 style="text-align: center;">刷新页面开始</h1>
    <script> 
        let zt = true;
        let Qu = document.getElementById("Qu");
        let ULi = document.querySelectorAll("ul li");
        let uto = document.getElementById("uto");
        let fliji = uto.offsetLeft;
        let jian = 704;
        let Lig = ['./img/oi.jpg',];
        let xiangzi = 0;
        let jifen = document.getElementById("jifen");
        let bijitu = document.getElementById('bijitu');

        // 键盘事件
        document.onkeyup = function (e) {
            let yy = Qu.offsetTop;
            if(e.keyCode == 87){ // w
                if(yy==200){
                    Qu.style='top:80px';
                    let set = setInterval(function head() {
                        Qu.style='bottom:250px';
                        clearInterval(set);
                    },600)           
                }   
            } 
        } 

        // 碰撞检测
        function Peng() {
            let xx = Qu.offsetLeft;
            let yy = Qu.offsetTop;
            for (let i = 0; i < ULi.length; i++) {
                if( 
                    ULi[i].offsetLeft+ULi[i].offsetWidth>xx &&
                    ULi[i].offsetTop+ULi[i].offsetHeight>yy &&
                    ULi[i].offsetLeft<xx+Qu.offsetWidth &&
                    ULi[i].offsetTop<yy+Qu.offsetHeight
                ){
                    bijitu.style="animation:paused;";
                    uto.style.marginLeft = 704+'px';
                    clearInterval(move);
                    clearInterval(ren);

                    let kashi = setTimeout (function kashi(){
                        let ale = confirm("装上了！！ ");
                        if(ale){
                            window.location.reload()
                        }else{
                            console.log("你真菜");
                        }
                    },100)
                }
            }
        }

        // 箱子移动
        let move = setInterval(function dong(){
            let nupx = jian -1;
            uto.style.marginLeft = nupx+'px';
            Peng();
            jian = jian-1;
            if(jian<-130){
                uto.style.marginLeft = 704+'px';
                jian=704;
                xiangzi = xiangzi+10;
                jifen.innerHTML = xiangzi
            }
        }, 1);

        // 小人跑起来
        // 注释掉或移除这部分代码
        // let yiyi = 0;
        // let ren = setInterval(function reqi(){
        //     if(yiyi != 7){
        //         zhendonghua.src = Lig[yiyi];
        //         yiyi++;
        //     }else{
        //         zhendonghua.src = Lig[0]; 
        //         yiyi = 0;
        //     }
        // }, 150);
    </script>
</html>